<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac">
        <p class="label font14 text_black agency_name">{{$t('关键词')}}：</p>
        <el-input v-model="keyword" :placeholder="$t('请输入关键词')"></el-input>
      </div>
      <button class="sub_btn font14 text_white bg_blue sub_btnn" @click="getData('search')">{{$t('提交')}}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addFAQ"
        v-if="permissions.indexOf('/faq/add') != -1"
      >{{$t('添加内容')}}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="question" :label="$t('标题')" width="300"></el-table-column>
        <el-table-column prop="answer" :label="$t('内容')"></el-table-column>
        <el-table-column :label="$t('操作')" width="140" fixed="right">
          <template slot-scope="scope">
            <div class="options_box">
              <el-button
                v-if="permissions.indexOf('/faq/edit') != -1"
                size="mini"
                type="primary"
                @click="updateFAQ(scope.row)"
              >{{$t('修改')}}</el-button>
              <el-button
                v-if="permissions.indexOf('/faq/delete') != -1"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >{{$t('删除')}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改 -->
    <el-dialog
      width="900px"
      :title="isUpdate ? $t('修改内容') : $t('添加内容')"
      :visible.sync="showOrderDetail"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('问题标题')}}：</span>
          <el-input v-model="title" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list u-f">
          <span class="lable font14 text_black">{{$t('问题内容')}}：</span>
          <el-input v-model="content" type="textarea" autosize :placeholder="$t('请输入')"></el-input>
        </div>

        <el-button size="medium" type="primary" @click="addSubmit" v-if="!isUpdate">{{$t('提交')}}</el-button>
        <el-button size="medium" type="primary" @click="updateSubmit" v-if="isUpdate">{{$t('提交')}}</el-button>
      </div>
    </el-dialog>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "faq-index",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      keyword: "",
      isUpdate: false,
      showOrderDetail: false,
      tableData: [],
      title: "",
      faq_id: "",
      content: ""
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.keyword = ''
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/faq/index?page=" + this.page, {
          page_size: this.page_size,
          keywords: this.keyword
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    addFAQ() {
      this.title = "";
      this.faq_id = "";
      this.content = "";
      this.isUpdate = false;
      this.showOrderDetail = true;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    addSubmit() {
      util
        .$http("/faq/add", {
          question: this.title,
          answer: this.content
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.title = "";
            this.faq_id = "";
            this.content = "";
            this.isUpdate = false;
            this.showOrderDetail = false;
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/faq/edit", {
          id: this.faq_id,
          question: this.title,
          answer: this.content
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.title = "";
            this.faq_id = "";
            this.content = "";
            this.isUpdate = false;
            this.showOrderDetail = false;
            this.getData();
          }
        });
    },
    updateFAQ(row) {
      this.isUpdate = true;
      this.showOrderDetail = true;
      setTimeout(() => {
        util
        .$http("/faq/detail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.title = res.data.question;
            this.faq_id = res.data.id;
            this.content = res.data.answer;
          }
        });
      }, 150);
    },
    handleDelete(row) {
      this.$confirm(this.$t("是否要删除当前问答"))
        .then(() => {
          util
            .$http("/faq/delete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .sub_btn {
  width: 80px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding: 0 10px;
}
.order_detail .ipt_list {
  margin-bottom: 15px;
}
.order_detail .ipt_list .el-input {
  display: inline-block;
  width: 500px;
  margin-right: 15px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .ipt_list .el-textarea {
  width: 500px;
}
.order_detail .el-button {
  margin-top: 30px;
}
</style>
<style>
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
